import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import styles from './index.module.css'
import { useNavigate, useParams } from 'react-router-dom'
import { NavBar, List, Tag, Popup, Steps } from 'antd-mobile'
import dayjs from 'dayjs'
function Index() {
    const { Step } = Steps
    const [visible1, setVisible1] = useState(false)
    const [date] = useState(dayjs().format('MM月DD日'))
    const navigate = useNavigate()
    const { id } = useParams()
    const [detail, setDetail] = useState({})
    const getDetail = async () => {
        const res = await http.get('/api/trip/train/detail', { params: { id } })
        console.log(res);
        const { code, data } = res.data
        if (code === 200) {
            setDetail(data)
        }
    }
    useEffect(() => {
        getDetail()
    }, [])
    return (
        <div>
            <div><NavBar onBack={() => navigate(-1)}>{date}</NavBar></div>
            <div className={styles.top_wroe}>
                <div className={styles.left_wroe}>
                    <span>{detail.start}</span>
                    <span>{detail.startTime}</span>
                    <span>{detail.end}</span>
                    <span>{detail.isSeat ? <Tag color='warning'>有票</Tag> : <Tag color='danger'>无票</Tag>}</span>
                    <span>{detail.isSpeed ? <Tag color='primary'>高铁</Tag> : <Tag color='success'>火车</Tag>}</span>
                    <span>5张</span>
                    <div className={styles.Tags_wroe}>
                        <Tag onClick={() => setVisible1(true)}>经停站</Tag>
                    </div>
                </div>
            </div>
            <div>
                <List.Item
                    extra={
                        <span
                            className={styles.ding_wroe}
                            onClick={()=>navigate(`/order?price=${detail.tick?.vip}&title=商务座`,{state:detail})}
                        >
                            订
                        </span>
                    }
                >
                    商务座  ￥{detail.tick?.vip}
                </List.Item>
                <List.Item
                   extra={
                        <span
                            className={styles.ding_wroe}
                            onClick={()=>navigate(`/order?price=${detail.tick?.firstTick}&title=一等座`,{state:detail})}
                        >
                            订
                        </span>
                    }
                >
                    一等座  ￥{detail.tick?.firstTick}
                </List.Item>
                <List.Item
                    extra={
                        <span
                            className={styles.ding_wroe}
                            onClick={()=>navigate(`/order?price=${detail.tick?.secondTick}&title=二等座`,{state:detail})}
                        >
                            订
                        </span>
                    }
                >二等座  ￥{detail.tick?.secondTick}
                </List.Item>
            </div>
            <Popup
                visible={visible1}
                showCloseButton
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
            >
                <div>
                    <div className={styles.title_wroe}>
                        <h2>G101时刻表</h2>
                    </div>
                    <div>
                        <Steps direction='vertical'>
                            <Step
                                title='北京'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='石家庄'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='河南'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='四川'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='重庆'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='成都'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='广州'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                        </Steps>
                    </div>
                </div>
            </Popup>
        </div>
    )
}

export default Index
